
import {View,Text,TouchableOpacity,StyleSheet, ScrollView,Image,Button,DeviceEventEmitter,Alert} from 'react-native';

import { Avatar } from '@rneui/themed';
import '../../global';
import { AntDesign, FontAwesome,MaterialIcons,Octicons,MaterialCommunityIcons,Ionicons,Entypo} from '@expo/vector-icons';
import { useEffect, useState } from 'react';
import { useSelector,useDispatch } from 'react-redux';
const showAlert = (msg,fun) =>
  Alert.alert(
    "提示",
    msg,
    [
      {
        text: "确认",
        onPress: fun,
        style: "cancel",
      },
    ],
    {
      cancelable: false, 
    }
  );
const User = ({navigation}) => {

    const list=useSelector(state=>state.list);
    const dispatch=useDispatch();
    console.log(list)
    if(list.name==''){
        list.name='未登录'
    }
    const Btn=()=>{
        if(list.isLogin==false){
            return <TouchableOpacity style={styles.exit} onPress={()=>{navigation.navigate('Login')
            }}>   
            <Text style={styles.exittxt}>{list.log}</Text> 
       </TouchableOpacity>
        }else{
            return <TouchableOpacity style={styles.exit} onPress={()=>{
                dispatch({type:'unlogin',value:false,name:"",log:'登录'});
            }}>   
            <Text style={styles.exittxt}>{list.log}</Text> 
       </TouchableOpacity>
        }
    }

    const Avata=()=>{
        if(list.isLogin==false){
            return <Avatar
            size={changeW(150)}
            rounded
            icon={{ name: 'pencil', type: 'font-awesome' }}
            containerStyle={styles.avatar}
        />
        }else{
            return <Image source={{uri:list.img}} style={styles.img}/>
            
        }
    }
    
    return (
        <ScrollView>
            <View style={styles.top}>
                <Avata></Avata>
                <View style={{marginLeft:changeW(20)}}>
                    <Text style={styles.username}>{list.name}</Text>
                    <Text style={styles.userschool}>{list.school}</Text>
                </View>
                
            </View>
            <View style={{marginTop:changeH(100)}}>
                <TouchableOpacity onPress={()=>{
                    if(list.isLogin==false){
                    showAlert('请先登录！',()=>navigation.navigate('Login'))
                    }else{
                    navigation.navigate('Write')
                }}}>
                    <View style={styles.list}>
                        <FontAwesome name="pencil-square-o" size={30} color="orange" style={styles.icon}/>  
                        <Text style={styles.listtxt}>我的创作</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} color="black" style={styles.arrow}/>
                    </View>
                </TouchableOpacity>
                
                <TouchableOpacity onPress={()=>{
                    if(list.isLogin==false){
                    showAlert('请先登录！',()=>navigation.navigate('Login'))
                    }else{
                    navigation.navigate('Like')
                }}}>
                    <View style={styles.list}>
                    <Entypo name="heart" size={30} color="red" style={styles.icon}/>
                        <Text style={styles.listtxt}>我的喜欢</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} color="black" style={styles.arrow}/>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={()=>{
                    if(list.isLogin==false){
                        showAlert('请先登录！',()=>navigation.navigate('Login'))
                        }else{
                            navigation.navigate('History')
                    }
                    }}>
                    <View style={styles.list}>
                    <MaterialCommunityIcons name="clock-time-four" size={30} color="lightgreen" style={styles.icon}/>  
                        <Text style={styles.listtxt}>浏览记录</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} color="black" style={styles.arrow}/>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={()=>{
                    if(list.isLogin==false){
                        showAlert('请先登录！',()=>navigation.navigate('Login'))
                        }else{
                            navigation.navigate('Message')
                    }}}>
                    <View style={styles.list}>
                    <AntDesign name="message1" size={30} color="lightblue" style={styles.icon}/>
                        <Text style={styles.listtxt}>消息</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} color="black" style={styles.arrow}/>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={()=>navigation.navigate('Help')}>
                    <View style={styles.list}>
                    <AntDesign name="questioncircleo" size={30} color="gray" style={styles.icon}/> 
                        <Text style={styles.listtxt}>帮助与反馈</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} color="black" style={styles.arrow}/>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={()=>navigation.navigate('Setting')}>
                    <View style={styles.list}>
                    <Ionicons name="settings-outline" size={30} color="black" style={styles.icon}/>
                        <Text style={styles.listtxt}>系统设置</Text>
                        <MaterialIcons name="keyboard-arrow-right" size={24} color="black" style={styles.arrow}/>
                    </View>
                </TouchableOpacity>
                
            </View>
            <Btn></Btn>
        </ScrollView>
    )
}

const styles=StyleSheet.create({
    top:{
        marginTop:changeH(130),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        marginLeft:changeW(20)
    },
    avatar:{
        marginLeft:changeW(100),
        backgroundColor:'red'
    },
    img:{
        width:changeW(150),
        height:changeW(150),
        borderRadius:110,
        marginLeft:changeW(100)
    },
    username:{
        fontSize:changeW(40),
        fontWeight:'bold',
    },
    userschool:{
        fontSize:changeW(25),
        color:'rgba(100,100,100,0.8)'
    },
    list:{
        marginBottom:changeH(10),
        height:changeH(100),
        backgroundColor:'white',
        position:"relative"
    },
    icon:{
        position:'absolute',
        left:changeW(30),
        top:changeH(25)
    },
    listtxt:{
        fontSize:changeW(25),
        color:'rgba(0,0,0,0.7)',
        position:'absolute',
        left:changeW(120),
        top:changeH(30)
    },
    arrow:{
        position:'absolute',
        right:changeW(30),
        top:changeH(30)
    },
    exit:{
        width:changeW(500),
        height:changeH(80),
        backgroundColor:'rgb(255,200,126)',
        borderRadius:changeW(40),
        marginLeft:changeW(120),
        marginTop:changeH(200),
        justifyContent:'center',
        alignItems:'center'
    },
    exittxt:{
        fontSize:changeW(35),
        color:'rgba(255,255,255,0.9)'
    }
})

export default User
